Node.js Websocket

2022-04-21
javascript node.js

Websocket 是从 HTML 5 开始所提供的一种浏览器与服务器之间的全双工通信网络技术，与即WebSocket 协议在 HTML 5 上的实施，该协议可在 TCP 连接上进行全双工通信，该协议在 2111 年由 IETF 开始标准化为 RFC6455。

双工（duplex）

双工被分为 全双工（full-duplex） 或 半双工（half-duplex），其中半双工的系统允许两台设备之间的双向资料的传输（但不能同时进行），若另一方需要发送，则需要等先前发送的消息处理完成后即可发送。

全双工（full-duplex）即允许两台设备之间同时进行双向的消息传输。

频分双工（FDD，Frequency-Division Duplexing）通过频率分割多任务技术来分割发送和接收的信号，上传和下载区段之间所使用的 频率偏移（Frequency offset） 来分隔。

WebSocket 协议支持客户端之间的双向通信，在此之前，创建一个双向的 Web 应用程序客户端和服务器之间进行通信，需要通过 HTTP 论寻，同时以不同的方式发送上游通知 HTTP 调用。

于是一个更简单的解决方法就是单个 TCP 链接，两个方向的交通使用 WebSocket 协议进行提供，因此他代替了 HTTP 论寻的替代方法到远程服务器，实际上 WebSocket 协议旨在取代现有的使用 HTTP 作为传输的双向通信技术。

new WebSocket.Server

Server

Node 所提供的 ws (WebSocket,ws)，可通过 new WebSocket.Server 方法创建一个新的服务器实例，之后在通过其事件与方法来实现服务端。

const WebSocket = require('ws')

const server = new WebSocket.Server({
    port:8210
})

// 当服务关闭时所返回的数据
server.on('close', function close() {
    console.log("Server close")
})

// 监听新的请求时返回回调函数
server.on('connection', function connection(ws,req) {
    const ip = req.connection.remoteAddress
    const port = req.connection.remotePort
    const name = ip + port;
    console.log(`%s is connected`, name)

    // 发送欢迎消息
    ws.send('Welcome' + name)

    // 服务器接收到消息时回调
    ws.on('message', function incoming(message) {
        console.log('received: %s from %s', message, name)

        server.clients.forEach(function (client) {
            if (client.readyState === WebSocket.OPEN) {
                client.send( name + " -> " + message);
            }
        })
    })
})

Client

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket</title>
</head>
<body>
<script type="text/javascript">
    var socket
    if (!window.WebSocket) {
        // Firefox 6.0 之前，部分引擎会认为 WebSocket 对象是错误的，因此被重命名为
        // "MozWebSocket"
        window.WebSocket = window.MozWebSocket
    }
    if (window.WebSocket) {
        socket = new WebSocket("ws://localhost:8210/ws")

        // 从服务器中接受到消息时回调
        socket.onmessage = function (event) {
            var ta = document.getElementById('responseText')
            ta.value = ta.value + '\n' + event.data
        }

        // 打开时回调
        socket.onopen = function (event) {
            var ta = document.getElementById('responseText')
            ta.value = "链接开启"
        }

        // 关闭时回调
        socket.onclose = function (event) {
            var ta = document.getElementById('responseText')
            ta.value = ta.value + "服务关闭"
        }
    } else {
        alert("浏览器不支持 WebSocket")
    }

    // 发送消息
    function send(message) {
        if (!window.WebSocket) {
            return
        }
        if (socket.readyState == WebSocket.OPEN) {
            socket.send(message)
        } else {
            alert("链接暂未开启")
        }
    }
</script>
<form onsubmit="return false;">
    <textarea id="responseText"></textarea>
    <br>
    <input type="text" name="message" style="width: 300px" value="Welcome">
    <input type="button" value="发送消息" onclick="send(this.form.message.value)">
    <input type="button" onclick="javascript:document.getElementById('responseText').value=''" value="清空聊天记录">
</form>
</body>
</html>

之后可以在其服务端和客户端中查看到发送的消息，这主要通过 send 方法来进行发送，但前提条件是浏览器支持 WebSocket 方法才可适用。

⬅️ Go back